<template>
  <div class="page">
    <div class="detail-header">
      {{projectDetail.name}}
    </div>

    <div class="page_filter">
      <el-row></el-row>
      <el-form ref="form" label-width="80px" :inline="true">
        <el-form-item label="监测对象">
          <el-select v-model.trim="workPointId" filterable clearable placeholder="选择监测对象" @change="changeWorkPoint">
            <el-option v-for="item in workPointList" :key="item.id" :label="item.name"
                       :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="监测类型">
          <el-select v-model.trim="type" clearable placeholder="选择监测类型" @change="changeMonitorType">
            <el-option v-for="item in monitorTypeSelectList" :key="item.monitorType" :label="item.name"
                       :value="item.monitorType"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>


    <monitor-view :type="type" :workPointId="workPointId" :active="activeId" ref="monitor_view"
                  :key="componentKey"></monitor-view>

  </div>
</template>

<script>
  import monitorView from '../monitor-point/monitor-render-wrap'
  import {getLocalStorageItem} from "../../../utils/storage-helper";
  import {store} from "../work-point.store";

  export default {
    components: {monitorView},
    data() {
      return {
        componentKey: '1',
        activeId: '1',
        workPointId: '',
        type: '',
        workPointList: [],
        monitorTypeSelectList: [],
      }
    },
    filters: {},
    computed: {
      projectDetail() {
        return getLocalStorageItem("projectInfo")
      },
    },
    methods: {
      initMonitorList(){
        const monitorList = this.workPointList.find(x => x.id === this.workPointId)?.children || []
        this.monitorList = monitorList
        //监测类型选项列表处理
        let monitorTypeSelectList = []
        monitorList.map(k => {
          let child = {
            name: k.name,
            menuIcon: store.iconMap[k.monitorType],
            monitorType: k.monitorType,
          }
          let item = monitorTypeSelectList.find(w => w.monitorType === child.monitorType)
          if (!item) {
            monitorTypeSelectList.push(child)
          }
        })
        this.monitorTypeSelectList = monitorTypeSelectList
        this.componentKey = new Date().getTime()
        this.changeMonitorType()
      },
      changeWorkPoint() {
        this.type = this.monitorTypeSelectList[0]?.monitorType
        this.initMonitorList()
      },
      changeMonitorType() {
        let item = this.monitorList.find(w => w.monitorType === this.type)
        this.activeId = item.id
        this.componentKey = new Date().getTime()
      },
    },
    created() {
      this.workPointList = getLocalStorageItem("workPoint_MonitorList")
      this.type = this.$route.query.monitorType ? parseInt(this.$route.query.monitorType) : this.workPointList[0]?.children[0]?.monitorType
      this.activeId = this.$route.query.activeId ? this.$route.query.activeId : this.workPointList[0]?.children[0]?.id
      this.workPointId = this.$route.query.workPointId ? this.$route.query.workPointId : this.workPointList[0]?.id
      this.initMonitorList()
    },
    mounted() {
      this.workPointList = getLocalStorageItem("workPoint_MonitorList")
      this.type = this.$route.query.monitorType ? parseInt(this.$route.query.monitorType) : this.workPointList[0]?.children[0]?.monitorType
      this.activeId = this.$route.query.activeId ? this.$route.query.activeId : this.workPointList[0]?.children[0]?.id
      this.workPointId = this.$route.query.workPointId ? this.$route.query.workPointId : this.workPointList[0]?.id
    },
    activated() {

    }
  }
</script>
<style scoped="scoped" lang="less">
  @import url('../common');

  .page_filter {
    padding: 10px 0 0 10px !important;

    .el-form--inline .el-form-item {
      margin-bottom: 10px;
    }
  }
</style>
